
<template>
  <view class="coupon-list">
    <view class="coupon-label">
      {{ title }}
      <image
        @click.stop="emits('close')"
        :src="ossImg('others/goods/close.png')"
      />
    </view>
    <view class="coupon-types">
      <view
        v-for="(item, index) in couponTypes"
        :key="index"
        :class="{ checked: index === usable }"
        @click.stop="handleChangeUsable(index)"
        >{{
          item.label +
          `（${
            item.key === 0
              ? props.couponHistories.length
              : props.unusableCouponHistories.length
          }）`
        }}</view
      >
    </view>
    <view class="coupon-container">
      <view
        class="coupon-card"
        v-for="item in listData"
        :key="item.id"
        @click.stop="chooseCoupon(item)"
      >
        <view
          class="coupon-info flex items-center"
          :class="[usable === 1 ? 'disable' : '']"
          :style="{
            background: `url(${ossImg(
              'others/order-coupon.png'
            )})no-repeat top left /
        100% 100%`,
          }"
        >
          <view class="price-info">
            <view class="price">{{ item.off }}</view>
            <view class="whitespace-nowrap text-xs text-sub">
              {{
                item.threshold !== 0
                  ? `满${item.threshold}可用`
                  : "无门槛优惠券"
              }}
            </view>
          </view>
          <view class="px-16px flex-1">
            <view class="label">{{ item.name }}</view>
            <view class="text-xs text-sub">
              {{ item.startTime }}~{{ item.endTime }}
            </view>
          </view>
        </view>
        <view
          class="coupon-checkbox"
          :class="{ checked: item.id === currentCoupon.id }"
          v-if="usable !== 1"
        ></view>
      </view>
    </view>
    <view class="coupon-action">
      <button @click.stop="Submit">确认</button>
      <view class="text-11px text-primary mt-5px text-center">
        当前所选优惠券可抵扣：￥{{ currentCoupon.off || 0 }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch } from "vue";
import { GetOrderCouponList } from "@/services/coupon";
import { onLoad } from "@dcloudio/uni-app";
import { ossImg, message } from "@/utils/utils";

const usable = ref(0);
const couponTypes = ref([
  { label: "可用优惠券", key: 0 },
  { label: "不可用优惠券", key: 1 },
]);
const emits = defineEmits(["close"]);
const props = defineProps({
  couponId: {
    type: String,
    default: () => "",
  },
  couponHistories: {
    type: Array,
    default: () => [],
  },
  unusableCouponHistories: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: () => "领取优惠券",
  },
});
const listData = ref(props.couponHistories);
const currentCoupon = ref({});

const Submit = () => {
  if (usable.value === 1) return message("当前优惠券不可用~");
  getApp()
    .sr()
    .track("trigger_coupon", {
      coupon: [
        {
          coupon_id: currentCoupon.value.id,
          coupon_name: currentCoupon.value.name,
        },
      ],
      coupon_package: {
        coupon_package_id: currentCoupon.value.id,
        coupon_package_name: currentCoupon.value.name,
      },
      coupon_batch: {
        coupon_batch_id: currentCoupon.value.id,
        coupon_batch_name: currentCoupon.value.name,
      },
      // more...
    });
  emits("close", currentCoupon.value);
};

watch(
  () => props.couponHistories,
  () => {
    console.log("监听porps");
    usable.value === 0
      ? (listData.value = props.couponHistories)
      : (listData.value = props.unusableCouponHistories);

    props.couponHistories.find((item) =>
      item.id === props.couponId ? (currentCoupon.value = item) : null
    );
    props.unusableCouponHistories.find((item) =>
      item.id === props.couponId ? (currentCoupon.value = item) : null
    );

    for (const item of listData.value) {
      getApp()
        .sr()
        .track("expose_coupon", {
          coupon: [
            {
              coupon_id: item.id,
              coupon_name: item.name,
            },
          ],
          coupon_package: {
            coupon_package_id: item.id,
            coupon_package_name: item.name,
          },
          coupon_batch: {
            coupon_batch_id: item.id,
            coupon_batch_name: item.name,
          },
          // more...
        });
    }
  }
);

const handleChangeUsable = (value) => {
  usable.value = value;
  value === 0
    ? (listData.value = props.couponHistories)
    : (listData.value = props.unusableCouponHistories);
  for (const item of listData.value) {
    getApp()
      .sr()
      .track("expose_coupon", {
        coupon: [
          {
            coupon_id: item.id,
            coupon_name: item.name,
          },
        ],
        coupon_package: {
          coupon_package_id: item.id,
          coupon_package_name: item.name,
        },
        coupon_batch: {
          coupon_batch_id: item.id,
          coupon_batch_name: item.name,
        },
        // more...
      });
  }
};
const chooseCoupon = (item) => {
  if (usable.value !== 1) {
    if (currentCoupon.value.id === item.id) {
      currentCoupon.value = {};
    } else {
      currentCoupon.value = item;
    }
  }
};
</script>
<style lang="less" scoped>
@import "@/static/css/theme.less";

.coupon-types {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
  height: 40px;
  margin: 0 -16px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1;

  view {
    width: 50%;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @desc-color;
    position: relative;

    &.checked {
      color: @label-color;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 23px;
        height: 3px;
        background: #0058c6;
      }
    }
  }
}

.coupon-action {
  padding: 28.5px 0;

  button {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #0058c6;
    border-radius: 20px;
    color: white;
    font-size: 16px;

    &::after {
      border: none;
    }
  }
}

.coupon-container {
  overflow: auto;
  height: 55vh;
}

.coupon-list {
  box-sizing: border-box;
  padding: 24px 16px 0 16px;

  .coupon-label {
    color: #2b2b2b;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: 12px;
    line-height: 1;

    image {
      width: 12px;
      height: 12px;
      display: block;
      right: 2px;
      top: 50%;
      transform: translate(0, -50%);
      position: absolute;
    }
  }

  .coupon-card {
    width: 100%;
    height: 90px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: @primary-color;

    .disable {
      opacity: 0.7;
    }

    .coupon-info {
      width: 100%;
      height: inherit;
      box-sizing: border-box;
      font-size: 12px;
      line-height: 1;
      display: flex;

      .price-info {
        width: 112px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .price {
          font-size: 32px;
          position: relative;
          margin-bottom: 10px;

          &::before {
            content: "¥";
            font-size: 12px;
          }
        }
      }

      .label {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 20px;
      }
    }

    .coupon-checkbox {
      min-width: 16px;
      height: 16px;
      border-radius: 16px;
      box-sizing: border-box;
      border: 1px solid @primary-color;
      margin-left: 12px;

      &.checked {
        border: none;
        background: url("@{ossPath}others/component/checkbox.png") no-repeat
          center / 100% 100%;
      }
    }
  }
}
</style>
